<template>
    <div class="out">
    <div class="arrow">
        <i class="iconfont icon-arrow-left" style="font-size:0.6rem;" @click="goBefore"></i>
        <span style="font-size: 0.28rem;font-weight: bold;">歌单</span>
        <i class="iconfont icon-more" style="font-size:0.5rem;"></i>
    </div>
    <div class="gedan">
        <div class="gedantitle">
            <div class="gedanmore">
            <img :src="coverImg" style="float:left;border-radius: 0.12rem;width: 1.7rem;height: 1.7rem;">
            <div>
                <p style="font-size: 0.26rem;font-weight: bold;">{{coverName}}</p>
                <p style="font-weight: 500;margin-top: 0.22rem;margin-left: 0.35rem;">有点小烦恼</p>
                <p style="font-weight: 500;text-overflow: ellipsis;white-space: nowrap;width: 4rem;overflow: hidden;margin-top: 0.45rem;margin-left: 0.15rem;">{{description}}</p>
            </div>
            </div>
        </div>
        <div class="gedanData">
            <div>
                <i class="iconfont icon-tianjia" style="font-size:0.3rem;"></i> {{count1}}
            </div>
            <div>
                <i class="iconfont icon-pinglun" style="font-size:0.27rem;"></i> {{count2}}
            </div>
            <div>
                <i class="iconfont icon-fenxiang" style="font-size:0.26rem;"></i> {{count3}}
            </div>
        </div>
        <div class="SongLists">
            <div class="list1">
            <i class="iconfont icon-shipinbofang-" style="font-size:0.45rem;color: #000;"></i>
            <span style="font-size:0.25rem;margin-left: 0.1rem;">播放全部</span>
            <i class="iconfont icon-xiazai" style="font-size:0.4rem;margin-left: 5rem;"></i>
            </div>
            <div class="songItem" v-for="(item,index) in gedanList" :key="index">
                <img :src="item.pic" style="width: 0.7rem;height: 0.7rem;border-radius: 0.15rem;"/>
                <div style="margin-left: 0.18rem;width: 5.1rem;">
                    <p style="font-weight: 400;">{{item.name}}</p>
                    <p style="text-overflow: ellipsis;white-space: nowrap;width: 5rem;overflow: hidden;">{{item.writer}} - {{item.name}}</p>
                </div>
                <div>
                    <i class="iconfont icon-bofangshipin" style="font-size:0.45rem;margin-right: 0.2rem;"></i>
                    <i class="iconfont icon-more" style="font-size:0.4rem;"></i>
                </div>
            </div> 
        </div>
    </div>
</div>
</template>

<script>
import {useRoute} from 'vue-router'
import {reactive,toRefs,onMounted,computed} from 'vue'
import axios from 'axios'

export default{
    setup() {
        const state=reactive({
           index:0,
           coverImg:"",
           description:"",
           coverName:"",
           count1:0,
           count2:163,
           count3:506,
           gedanList:[],
           gedanId:"gedan0"
        })
        onMounted(async()=>{
            // let res=await axios.get('http://localhost:3000/playlist/detail?id='+state.index).then(res=>res.data.playlist);
            let res=await axios.get("http://localhost:3002/gedanDetail/"+state.gedanId+".json").then(res=>res.data.playlist);
            state.coverImg=res.coverImgUrl;
            state.description=res.description;
            state.coverName=res.name;
            state.count1=res.subscribedCount;
            // let res2=await axios.get('http://localhost:3000/playlist/track/all?id='+state.index+'&limit=10').then(res=>res.data.songs);
            let res2=await axios.get("http://localhost:3002/gedanSongs/"+state.gedanId+".json").then(res=>res.data.songs);
            res2.forEach(res => {
                let song={id:"",name:"",writer:"",pic:""};
                song.id=res.id;
                song.name=res.name;
                song.writer=res.ar[0].name;
                song.pic=res.al.picUrl+"?param=30y30";
                state.gedanList.push(song);
            });
        })
        const goBefore=()=>{
            window.history.go(-1);
        }
        const route=useRoute();
        state.gedanId=computed(()=>{
            return route.params.gedanId;
        })
        // state.index=route.query.id
        // console.log(state.index);
        // const router=useRouter()
        // const goPlayMusic=(index)=>{
        //     router.push({
        //             path:'/playSong',
        //             query:{
        //                 index:state.gedanList[index].id,
        //                 pic:state.gedanList[index].pic,
        //                 name:state.gedanList[index].name,
        //                 writer:state.gedanList[index].writer
        //             }
        //     })
        // }
        return{
            ...toRefs(state),goBefore
            // ,goPlayMusic
        }
    }
}
</script>

<style scoped>
*{
  color: white;
}
.out{
    width: 7.5rem;
      height: 13.34rem;
      background: url(../assets/bg.jpg);
      background-size:cover;
}
.gedan{
    width: 7.5rem;
    height: 12rem;
    overflow: auto;
}
.gedantitle{
  height: 3.1rem;
  border-bottom-left-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
  background: rgba(0,0,0,0.4);
}
.arrow{
  height: 0.7rem;
  display: flex;
  background: rgba(0,0,0,0.4);
  justify-content: space-between;
  align-items: center;
  padding: 0 0.15rem;
}
.gedanmore{
  height: 2.6rem;
  padding: 0.28rem 0.25rem;
}
.gedanmore div{
    float: right;
    text-align: left;
    width: 5.2rem;
}
.gedanData{
    width: 4.8rem;
    height: 0.73rem;
    background: rgba(200,200,200,0.5);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.35rem;
    border-radius: 1rem;
    position: relative;
    top: -0.35rem;
}
.SongLists{
  width: 7.2rem;
  height: 11rem;
  margin: 0 0.15rem;
}
.list1{
  height: 0.4rem;
  display: flex;
  align-items: center;
  margin-bottom: 0.22rem;
}
.songItem{
  height: 0.8rem;
  margin:0.12rem 0 0.12rem 0.12rem;
  display: flex;
  align-items: center;
}
</style>